<template>
	<div ref="chartRef" id="rightdiv_Funnelecharts" style="width: 100%; height: 180px"></div>
</template>
<script lang="js" setup>
	import * as echarts from 'echarts';
	import {ref, reactive, computed, unref, watchEffect, onMounted} from 'vue';
	const props = defineProps({
		echartsdata: {
			type: Array,
			default: () => [],
		},
	});
	watch(
		() => props.echartsdata,
		(val) => {
			console.log('echartsdata111', val);
			initCharts();
		},
		{
			deep: true,
		}
	);

	let myChart = ref(null);

	const option = reactive({
		color: ['#0e76d7', '#ff9447', '#f63016'],
		tooltip: {
			trigger: 'item',
			formatter: '{a} <br/>{b} : {c}个',
		},
		series: [
			{
				name: '风险种类',
				type: 'funnel',
				left: '1%',
				right: '1%',
				top: 10,
				bottom: 10,
				width: '100%',
				min: 60,
				max: 100,
				minSize: '30%',
				maxSize: '100%',
				sort: 'descending',
				gap: 3,
				label: {
					show: true,
					position: 'inside',
				},
				labelLine: {
					length: 10,
					lineStyle: {
						width: 1,
						type: 'solid',
					},
				},
				itemStyle: {
					borderColor: '#fff',
					borderWidth: 1,
				},
				emphasis: {
					label: {
						fontSize: 20,
					},
				},
				data: [
					{value: 60, name: '低风险4'},
					{value: 80, name: '中风险 80'},
					{value: 100, name: '高风险100'},
				],
			},
		],
	});
	function initCharts() {
		console.log('props.echartsdata', props.echartsdata);
		// 1高2中3低
		let seriesData = props.echartsdata.map((item) => {
			return {
				value: item.num,
				name: item.name == 1 ? '高' : item.name == 2 ? '中' : '低',
			};
		});

		option.series[0].data = seriesData;

		myChart = echarts.init(document.getElementById('rightdiv_Funnelecharts'));
		myChart.setOption(option);
	}
	// const myChart = ref(null);
	onMounted(() => {
		initCharts();
		window.addEventListener('resize', () => {
			myChart.resize();
		});
	});
</script>
